Laura Ascanio's profilePaola Ascanio's profile

Gibby Social Commerce: UX/UI Case Study

Gibby Social Commerce: UX/UI Case Study
Gibby: Social Commerce - UX/UI Case Study
Website Redesign of Gibby a social commerce startup based in Indonesia where users can post product-centric reviews including video or photo reviews about their experience with a product and buy inside the app.
Objective
Our primary goal is to attract desktop users who seek reviews online implementing an SEO strategy by including product reviews and contents posted by users on the website. Permiting users to find reviews, search products, and discover other people’s experiences/content while encouraging them to download the Gibby app so they can participate by creating a post, write reviews, and buy the product in the app.
Challenge

Eighty percent (80%) of users use their desktop web browsers to search for reviews online on products they consider purchasing. However, the Gibby website focuses primarily on promoting existing app features instead of promoting content discovery making it difficult for users to easily discover products and read reviews online.
Information Architecture
Our main objective is to attract desktop users looking for online reviews by implementing an SEO strategy such as highlighting keywords and simple phrases to attract the specific audience, prioritizing intuitive design navigation, continually thinking about what customers will do in every page they come to so they can easily find what they're looking for every step of the way and make sure the main menu lists the most important pages visitors can visit on the site.
User Flow Chart

Once I was ready to design I mapped out the user flow for the jobs-to-be-done. Which were look for reviews, write reviews, seller.
MVP - Main Features

Gibby is meant for users to leave reviews, or leave tips, tutorials, do unboxings and share their overall experience with a product.

1.The user will most likely do this through video content but they can also upload photo content.

2.I have separated reviews and ratings on the website ( reviews being the posts tab and ratings being the reviews tabs)

    a. When users look for product reviews on the web they tend to seek an overall rating.

3. A product that can be bought through Gibby will have customer ratings

    a. users select out of 5 stars to rate their experience and writes a review after the purchase

4. The product has a dedicated page where ratings can be found and users can purchase the product as well as see all the posts tagged to this product on gibby.

5. A post on the other hand is a review that does not contain a star rating and isn't necessarily linked to a product on gibby however if a user wants to link it to a product on gibby they can do so through tags ( like instagrams tag people on a post)

6. on mobile as a user scrolls through their feed or recommendations (for you screen) reviews will appear, ratings appear on the product screen

7. in the discover screen both review and rating will appear seamlessly kind of how you see instagram posts and IGTV posts together in your feed.

Interactive prototype
After defining the key features I proceeded to develop an interactive prototype in invisionapp
Website Mockups
Social Commerce Mockups
Gibby Social Commerce: UX/UI Case Study
Published:

Gibby Social Commerce: UX/UI Case Study

Published: